<template>
<div v-if="t_isShow" class="panel b-success" style="
    width: 240px;
    position: fixed;
    bottom: 5px;
    right: 25px;
    z-index: 100;
">
        <div class="panel-heading b-b b-light">
          图例说明
        </div>
        <div class="panel-body">
            
          <a-row :gutter="20" v-for="item in t_lengedData"  v-bind:key="item.name">
  <a-col :span="8" style="text-align:center"><a-tag v-bind:style ="{ 'background-color': item.color,'width':'50px','height':'25px'}"></a-tag></a-col>
  <a-col :span="16"><div class="grid-content ">{{item.name}}</div></a-col>
</a-row>
        </div>
      </div>
    
</template>
<style>
.grid-content {
    border-radius: 4px;
    min-height: 25px;
    line-height: 30px;
    font-weight: bolder;
  }
  .box-card{
    padding:5px
  }
</style>

<script>
export default {
  name: 'mapLenged',
  props: {
    isShow:{
      type: Boolean,
      default:false
    },
    lengedData:{
      type: Array,
      default:()=>[]
    }
  },
  data() {
    return {
      t_isShow:this.isShow,
      t_lengedData:this.lengedData,
    };
  },
  watch: {
    isShow() {
      this.t_isShow = this.isShow;
    },
    lengedData() {
      this.t_lengedData = this.lengedData;
    }
  },
};

</script>